Crate leptos_dom
source ·Expand description
DOM operations and rendering for Leptos.
This crate mostly includes utilities and types used by the templating system, and utility functions to make it easier for you to interact with the DOM, including with events.
It also includes functions to support rendering HTML to strings, which is the server-side equivalent of DOM operations.
Note that the types Element and Node are type aliases, handled differently depending on the target:
- Browser (features
csrandhydrate): they alias web_sys::Element and web_sys::Node, since the renderer works directly with actual DOM nodes. - Server: they both alias String, since the templating system directly generates HTML strings.
Re-exports
Macros
Uses
println!()-style formatting to log warnings to the console (in the browser)
or via eprintln!() (if not in the browser), but only if it’s a debug build.Uses
println!()-style formatting to log errors to the console (in the browser)
or via eprintln!() (if not in the browser).A shorthand macro to test whether this is a debug build.
Shorthand to test for whether an
ssr feature is enabled.Uses
println!()-style formatting to log something to the console (in the browser)
or via println!() (if not in the browser).Uses
println!()-style formatting to log warnings to the console (in the browser)
or via eprintln!() (if not in the browser).Structs
Handle that is generated by set_interval and can be used to clear the interval.
Enums
Represents the different possible values an attribute node could have.
Represents the different possible values an element child node could have.
Represents the different possible values a single class on an element could have,
allowing you to do fine-grained updates to single items
in
Element.classList.Marks the node relative to which an operation should occur.
Represents the different possible values an element property could have,
allowing you to do fine-grained updates to single fields.
Traits
Converts some type into an Attribute.
Converts some type into a Property.
Describes a type that can be mounted to a parent element in the DOM.
An extension trait for
Option<T> and Result<T, E> for unwrapping the T
value, or throwing a JS error if it is not available.Functions
Adds an event listener to the target DOM element using implicit event delegation.
Appends a child node to the parent element.
See
Node.appendChild.Binds the
value to the attribute attr_name on this el. If the attribute is reactive,
it will create an effect to make fine-grained reactive updates
to the attribute value.Returns the
<body> elements of the current HTML document, if it exists.Binds the
value to the class class_name on this el’s classList. If the class value is reactive,
it will create an effect to make fine-grained reactive updates
to the class list.Clones an an
HTMLTemplateElement
and returns its first element child.Log an error to the console (in the browser)
or via
println!() (if not in the browser), but only in a debug build.Log an error to the console (in the browser)
or via
println!() (if not in the browser).Log a string to the console (in the browser)
or via
println!() (if not in the browser).Log a warning to the console (in the browser)
or via
println!() (if not in the browser).Creates a
Comment node.
See Document.createCommentNode.Creates a DOM
Element. See
Document.createElement.Creates a
DocumentFragment. See
Document.createElement.Creates an
HTMLTemplateElement
and sets its innerHTML to the given HTML string.Creates a DOM
Text node. See
Document.createTextNode.Encodes strings to be used as attribute values in HTML by escaping
&, <, >, and ".Encodes strings to be used as text in HTML by escaping
&, <, and >.Helper function to extract
Event.target
from any event.Helper function to extract
event.target.checked from an event.Helper function to extract
event.target.value from an event.Inserts a child into the DOM, relative to the
before marker. If the child is reactive,
it will create an effect to make fine-grained reactive updates
to the DOM value.Inserts the new node before the existing node (or, if
None, at the end of the parent’s children.)
See Node.insertBefore.Returns the current
window.location.Current
window.location.hash
without the beginning #.Runs the given function to mount something to the given element in the DOM.
Runs the given function to mount something to the
<body> element in the DOM.Binds the
value to the property prop_name on this el. If the property is reactive,
it will create an effect to make fine-grained reactive updates
to the property.Diffs two sets of DOM nodes and patches the parent element to match the new entry.
Removes an attribute from a DOM element.
See
Element.removeAttribute.Removes the child node from its parent element.
See
Node.removeChild.Removes all event listeners from an element.
Renders a component to a stream of HTML strings.
Renders a component to a stream of HTML strings and returns the Scope and Disposer.
Renders a component to a static HTML string.
Replaces the old node with the new one, within the parent element.
See
Node.replaceChild.Replace the old node with the new node in the DOM.
See
Element.replaceWith.Runs the given function between the next repaint
using
Window.requestAnimationFrame.Queues the given function during an idle period
using
using
Window.requestIdleCallback.Sets the value of an attribute on a DOM element.
See
Element.setAttribute.Sets the text of a DOM text node.
Repeatedly calls the given function, with a delay of the given duration between calls.
See
setInterval().Sets a property on a DOM element.
Executes the given function after the given duration of time has passed.
setTimeout().Adds an event listener to the
Window.